<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>order_exercise</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/order_exeercise.css">
</head>
<body>
    <div class="head">
            <span class="title">在线驾考模拟系统</span>
            <ul>
                <!-- <li><a href="loading.html">登录</a></li>
                <li><a href="register.html">注册</a></li> -->
            </ul>      
        </div>
    
        <div class="nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="order_exercise.html">顺序练题</a></li>
                <li><a href="error_book.html">错题本</a></li>
                <li><a href="mock_exam.html">模拟测试</a></li>
                <li><a href="message.html">留言板</a></li>
            </ul>
        </div>

        <div id="content" class="content">
             <ul>
				<li>
					<p></p>
					<div>
						
					</div>
				</li>
            </ul>
        </div>
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			init()
			function init() {
				$.ajax({
					// url: './order.json',
                    url:'order.json',
					success(res) {
						loadQuestion(res)
					}
				})
			}
			function loadQuestion(res) {
				console.log(res.data)
				var str = ''
				for(var ele of res.data) {
					console.log(ele)
					str += questionItem(ele)
				}
				$('#content').html(str)
				$('input[type="radio"]').on('click', function() {
					var rightId = $(this).parent('.input')[0].dataset.right
					if($(this).val()!==rightId) {
						alert(`选择错误,正确答案是${rightId}`)
					}
				})
			}
			function questionItem(obj) {
				return `<li>
					<div class="" name="${obj.id}">
						${obj.id}.${obj.question}
					</div>
					<div class="input" data-right="${obj.right_id}">
						${radioTemplate(obj)}
					<div>
				</li>`
			}
			function radioTemplate(obj) {
				var str = ''
				for(var ele of obj.option) {
					str += inputTemplate(obj.id, ele)
				}
				console.log(str)
				return str
			}
			function inputTemplate(id, item) {
				return `<input name="${id}" type="radio" value="${item.answer_id}"/><span>${item.answer_word}</span>`
			}
			function isRight() {
				console.log()
			}	

		</script>
</body>
</html>